<template>
  <div class="home">
   <div class="zz">
     <h1 style="color: white;  margin-left: 690px; margin-top: 200px;">用户登录</h1>
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px" style="text-align: center;" :rules="rules">

  <el-form-item prop="user">
    <el-input v-model="form.username" icon="el-icon-search" style="width: 400px;" placeholder="用户名" ></el-input>
  </el-form-item>  
  <el-form-item prop="pass">
    <el-input type="password" v-model="form.password" style="width: 400px;" placeholder="密码"></el-input>
  </el-form-item>  

  <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
  </el-form-item>
</el-form>
<div class="zi" style="margin-left: 600px; color:white">
   <p> 测试权限账号：</p>
 <p>提供三种权限账号：</p>
 <p>1. 超级管理员账号： super-admin</p>
 <p>2. 管理员账号：admin</p>
 <p>3. 测试可配置账号：test</p>
 <p>密码统一为：123456</p>
 <p>导入用户账号：</p>
 <p>可使用导入的用户名登录</p>
 <p>密码统一为：123456</p>
 <p>注意：导入用户区分中英文库！！！！</p>


</div>
   </div>
</div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
         rules: {
          user: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          pass: [
         { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
         
        },
        form: {
          username: '',
         password:''
        }
      }
    },
    methods: {
      onSubmit() {
          this.$router.push('/index')

       axios.post('https://api.imooc-admin.lgdsunday.club/api/sys/login').then(res=>{
        console.log(res);
      
       })
      }
    }
  }
</script>
<style scoped>
    .el-form-item__error{
      margin-left: 500px;
    }
   .home{
     margin: 0;
        padding: 0;
      width: 100%;
      height: 100%;
        background-color: rgb(57, 67, 85);
        overflow: hidden; 
    }
    
</style>